import React from 'react';
import { history, Link, NavLink, Prompt, useParams } from 'umi';

const Cmpt: React.FC<any> = (props) => {
    const formIsHalfFilledOut = true;
    const params = useParams()
    // history 栈里的实体个数
    console.log(history.length);
    // 当前 history 跳转的 action，有 PUSH、REPLACE 和 POP 三种类型
    console.log(history.action);
    // location 对象，包含 pathname、search 和 hash
    console.log(history.location.pathname);
    console.log(history.location.search);
    console.log(history.location.hash);

    const handleClick = () => {
        history.push({
            pathname: '/user',
            query: {
                a: 'b',
            },
        });
    }

    /** 路由监听（测试不行） */
    const unlisten = history.listen((location: any, action: any) => {
        console.log(location.pathname);
    });
    unlisten();

    return (
        <div>
            Hello dynamicImport
            <input type='button' onClick={handleClick} value='back' />
            <input type='button' onClick={() => history.push('/')} value='home' />
            <input type='button' onClick={() => history.push('/user')} value='user' />
            <ul>
                <li>params: {JSON.stringify(params)}</li>
            </ul>
            <div>
                {/* 点击跳转到指定 /about 路由 */}
                <Link to="/about">About</Link><br />
                {/* 点击跳转到指定 /courses 路由，
          附带 query { sort: 'name' }
      */}
                <Link to="/courses?sort=name">Courses</Link><br />
                {/* 点击跳转到指定 /list 路由，
          附带 query: { sort: 'name' }
          附带 hash: 'the-hash'
          附带 state: { fromDashboard: true }
      */}
                <Link
                    to={{
                        pathname: "/list",
                        search: "?sort=name",
                        hash: "#the-hash",
                        state: { fromDashboard: true },
                    }}
                >
                    List1
      </Link><br />
                {/* 点击跳转到指定 /profile 路由，
          附带所有当前 location 上的参数
      */}
                <Link
                    to={location => {
                        return { ...location, pathname: "/profile" };
                    }}
                >
                    List2
          </Link><br />
                {/* 点击跳转到指定 /courses 路由，
          但会替换当前 history stack 中的记录
      */}
                <Link to="/courses" replace
                >
                    List3
      </Link><br />
                {/* 
          innerRef 允许你获取基础组件（这里应该就是 a 标签或者 null）
      */}
                <Link
                    to="/courses"
                    innerRef={node => {
                        console.log(node);
                        // `node` refers to the mounted DOM element
                        // or null when unmounted
                    }}
                >
                    List4
          </Link><br /><br />

                {/* 和 Link 等价 */}
                <NavLink to="/about">About</NavLink><br />
                {/* 当前路由为 /faq 时，附着 class selected */}
                <NavLink to="/faq" activeClassName="selected">
                    FAQs
      </NavLink><br />
                {/* 当前路由为 /faq 时，附着 style */}
                <NavLink
                    to="/faq"
                    activeStyle={{
                        fontWeight: "bold",
                        color: "red",
                    }}
                >
                    FAQs
      </NavLink><br />
                {/* 当前路由完全匹配为 /profile 时，附着 class */}
                <NavLink exact to="/profile" activeClassName="selected">
                    Profile
      </NavLink><br />
                {/* 当前路由为 /profile/ 时，附着 class */}
                <NavLink strict to="/profile/" activeClassName="selected">
                    Profile
      </NavLink><br />
                {/* 当前路由为 /profile，并且 query 包含 name 时，附着 class */}
                <NavLink
                    to="/profile"
                    exact
                    activeClassName="selected"
                    isActive={(match, location) => {
                        if (!match) {
                            return false;
                        }
                        return location.search.includes("name");
                    }}
                >
                    Profile
      </NavLink><br /><br />



                {/* 用户离开页面时提示一个选择 */}
                <Prompt message="你确定要离开么？" />
                {/* 用户要跳转到首页时，提示一个选择 */}
                <Prompt
                    message={location => {
                        return location.pathname !== "/" ? true : `您确定要跳转到首页么？`;
                    }}
                />
                {/* 根据一个状态来确定用户离开页面时是否给一个提示选择 */}
                <Prompt when={formIsHalfFilledOut} message="您确定半途而废么？" />
            </div>
        </div>

    );
}

export default Cmpt;